<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%String ctx = request.getContextPath();%>
<title>question list</title>
</head>

<script>
	$(document).ready(function(){
		$.ajax(
			{
				dataType: "json",
				type: "GET",
				url: "<%=ctx%>/paper?act=getAll",	
				data: {},	
				success: function(data, status) {
					let select = $("#paper")
					select.empty();
					let idx = 1;
					$.each(data, function(i, e) {
						select.append("<option value='" + e.id + "'>"+ e.name +"</option>");
						idx += 1;
					})
				},
				error: function(req, status, msg) {
					alert(msg)
				}
			}
		)
	});
	
	function addToPaper() {
		let id_arr = []
        $("input[name='ck']:checked").each(function() {
        	id_arr.push(this.value)
        });
		if(id_arr.length  === 0) {
			alert("请选择试题")
			return;
		}
		let queType = $("#qtype").find("option:selected").text();
		let paperName = $("#paper").find("option:selected").text();

		let idarrayStr = '&idarray='
		
		for(let i=0; i<id_arr.length ; ++i) {
			if(i===id_arr.length-1) {
				idarrayStr += id_arr[i] + ''
			} else {
				idarrayStr += id_arr[i] + '&idarray='
			}
		}
		$.ajax(
			{
				type:"GET",
				url: '<%=ctx%>/paper?act=addToPaper' + idarrayStr,
				dataType: "json",
				data: {
					"quetype":queType,
					"papername":paperName,
				},
				success: function(data, status) {
					alert(data);
				},
			  	error: function(req, status, msg) {
				 	alert(msg);
			  	}
			}
		)
		
	}
	let questionType = "choice"
	function updateQuestionList() {
		let queType = $("#qtype").find("option:selected").text();
		switch(queType) {
			case "单选题":
				queType = "choice";
				break;
			case "多选题":
				queType = "multichoice";
				break;
			case "判断题":
				queType = "judge";
				break;
			case "简答题":
				queType = "discuss";
				break;
		}
		$.ajax(
			{
				dataType: "json",
				type: "GET",
				url: "<%=ctx%>/question?act=getByType",	
				data: {
					"type" :queType
				},	
				success: function(data, status) {
					let tbody = $("#questiontbody")
					tbody.empty();
					let idx = 1;
					$.each(data, function(i, e) {
						tbody.append("<tr>  <td><input name='ck' type='checkbox' value=" + e.id + "></td>  <td>" + idx + "</td><td style='overflow: hidden;text-overflow: ellipsis;max-width: 200px;'>" + e.content + "</td><td><button type='button' class='btn btn-primary' onclick='editQuestion(" + e.id + ")'>编辑</button> <button type='button' class='btn btn-danger'>删除</button></td></tr>");
						idx += 1;
					})
					questionType = queType
				},
				error: function(req, status, msg) {
					alert(msg)
				}
			}
		)
	}
	
	function editQuestion(qid) {
		switch(questionType) {
			case "choice":
			case "multichoice":
				AjaxLoad('<%=ctx%>/control?act=createChioce&qid='+qid)
				break;
			case "judge":
				AjaxLoad('<%=ctx%>/control?act=createJudge&qid='+qid)
				break;
			case "discuss":
				AjaxLoad('<%=ctx%>/control?act=createDiscuss&qid='+qid)
				break;
		}
	}

</script>


<body>
	<div id="list" class="col-md-10 col-xs-12">
		<h3>题目列表</h3>
		<hr>
		<div class="fiter col-md-10 col-xs-12">
			<form action="" class="form-horizontal form-inline">
				<button type="button" class="btn btn-success" onclick="AjaxLoad('<%=ctx%>/control?act=createChioce')">+选择题</button>
				<button type="button" class="btn btn-success" onclick="AjaxLoad('<%=ctx%>/control?act=createJudge')">+判断题</button>
				<button type="button" class="btn btn-success" onclick="AjaxLoad('<%=ctx%>/control?act=createDiscuss')">+简答题</button>
			</form>
		</div>
		<div class="fiter col-md-10 col-xs-12">
				<br>
				<form action="" class="form-horizontal form-inline">
					<select onchange="updateQuestionList()" class="form-control" id="qtype">
						<option>单选题</option>
						<option>多选题</option>
						<option>判断题</option>
						<option>简答题</option>
					</select>
					<button type="button" class="btn btn-primary" onclick="addToPaper()">添加到试卷</button>
					<select class="form-control" id="paper"/>
				</form>
		</div>
  
<table class="table table-hover">
	<thead> <tr>
			<th>选择</th>
			<th>序号</th>
			<th>题干</th>
			<th>操作</th>
	</tr></thead>
	
	<tbody id="questiontbody" style="table-layout:fixed"> 
	<c:forEach items="${QuestionList}" var="Question" varStatus="s">
		<tr>
				<td><input name="ck" type="checkbox" value="${Question.id}"></td>
				<td>${s.index + 1}</td>
				<td style="overflow: hidden;text-overflow: ellipsis;max-width: 200px;">${Question.content}</td>
				<td> 	
<button type="button" class="btn btn-primary" onclick="editQuestion('${Question.id}')">
						编辑</button>
<button type="button" class="btn btn-danger" onclick="">
						删除</button>
				</td>
		</tr>
	</c:forEach>
	</tbody>
</table>
	</div>
</body>
</html>